<template>
	<view class="pullNew-wrapper wrapperLayer">
		<titleBar :titleText='"精选商品 助您邀新"' :pageForm='"pullNew"'></titleBar>
		<view class="pagebottom-container pd30 colCen">
			<view class="invite-step colCen">
				<view class="step-title">
					邀请步骤
				</view>
				<view class="step-list">
					1. 将海报分享给好友</br>
					<!-- ⒉ 好友注册时填写您的邀请码</br> -->
					2. 好友即可0元购买改商品</br>
					<!-- 未来他/她有购物订单,您可获得佣金奖励,并自动计入您的帐户 -->
				</view>
			</view>

			<view class="bottomList-title">
				精选商品 助您邀新
			</view>

			<view class="goodsList-container colCen">
				<block v-for="(items,index) in goodsList" :key="index">
					<view class="items-container rowCen">
						<view class="left-image defIcon">
							<image :src="items.mainPic" mode="aspectFill"></image>
						</view>
						<view class="right-info-container colCen">
							<view class="goodsnameinfo-content rowSta">
								<view class="typeIcon-content defIcon">
									<image src="../../static/images/goods/tmtips.png" mode="heightFix"></image>
								</view>
								<view class="tradename">
									{{items.dtitle}}
								</view>
							</view>
							<view class="coupon-box rowCen">
								<view class="coupon-box-bac rowCenCen">
									<view>{{items.couponPrice}}元券</view>
								</view>
							</view>
							<view class="btm-price-info rowCenBet">
								<view class="leftcontent">
									<view class="org-price">
										原价<s>￥{{items.originalPrice}}</s>
									</view>
									<view class="new-price rowEnd">
										<view class="tips">
											新人价
										</view>
										<view class="price">
											￥0
										</view>
									</view>
								</view>

								<view class="right-btn rowCenCen" @click="showModel(items)">
									<view>分享</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<aLoadMore :status="loadstate" mode="loading3" :showTitle='true' color="#999999"></aLoadMore>
			</view>
		</view>

		<u-popup v-model="shareShow" mode="bottom" border-radius="14" height="auto">
			<view class="share-container colCen">
				<view class="share-title rowCenCen">
					<view class="title-text">
						分享到
					</view>
				</view>
				<view class="shareList rowCen">
					<view class="items-container colCen" @tap='sharewx()'>
						<view class="icon-box defIcon">
							<image src="../../static/images/mine/wxshare.png" mode=""></image>
						</view>
						<view class="modeName">
							微信好友
						</view>
					</view>
					<view class="items-container colCen" @tap='sharepyq()'>
						<view class="icon-box defIcon">
							<image src="../../static/images/mine/sharefriend.png" mode=""></image>
						</view>
						<view class="modeName">
							朋友圈
						</view>
					</view>
					<view class="items-container colCen" @tap='shareqq()'>
						<view class="icon-box defIcon">
							<image src="../../static/images/mine/shareqq.png" mode=""></image>
						</view>
						<view class="modeName">
							QQ
						</view>
					</view>
					<view class="items-container colCen" @tap='savepic()'>
						<view class="icon-box defIcon">
							<image src="../../static/images/app/saveimg.png" mode=""></image>
						</view>
						<view class="modeName">
							保存相册
						</view>
					</view>
				</view>

				<view class="cancelbox rowCenCen" @click="closeModel()">
					<view class="canceltext">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		
		<canvas canvas-id="qrcode" class="canvass" style="width: 260rpx;height: 260rpx;opacity: 0;" />
		<canvas canvas-id="sharePoster" class="canvass" :style="{ width: canvasInfo.canvasW + 'px', height: canvasInfo.canvasH + 'px'}" />
	</view>
</template>

<script>
	import util from '../../utils/utils.js'
	import uQRCode from '../../utils/qrcode.js'
	let qrcode
	export default {
		data() {
			return {
				goodsList: [],
				userInfo: '',

				CVS: null,
				canvasInfo: {
					canvasW: 750,
					canvasH: 1334,
				},
				codeSrc: '',
				shareUrl: '',
				shareShow: false,

				loadstate: 'nomore',
				pageCurrent: 0,
				canload: false
			}
		},
		onLoad() {
			this.getData()
			this.userInfo = util.getCacheSync('userData')
			setTimeout(() => {
				this.makeCode()
			}, 100)
		},
		onReachBottom() {
			if (this.canloadmore) {
				this.getData()
			}
		},
		methods: {
			getData() {
				this.$http.post('zeroBuyOrder/getZeroGoods', {
					limit: 10,
					offset: this.pageCurrent,
					type: 1
				}, 'application/json').then(res => {
					uni.stopPullDownRefresh();
					if (res.length < 10) {
						this.canload = false
						this.loadingstates = 'nomore'
					} else {
						this.canload = true
						this.loadingstates = 'loading'
						this.pageCurrent += 10
					}
					this.goodsList = this.goodsList.concat(res)
				})
			},

			showModel(items) {
				this.$nextTick(() => {
					this.sharegoods(items)
				})
			},

			closeModel() {
				this.shareShow = false
			},

			async makeCode() {
				var txt = getApp().globalData.appinfo.appAndroidDownUrl
				// #ifdef APP-PLUS
				txt = plus.os.name == 'Android' ? getApp().globalData.appinfo.appAndroidDownUrl : getApp().globalData.appinfo.appIosDownUrl, // 生成内容
					// #endif
					qrcode = new uQRCode({
						context: this, // 上下文环境
						canvasId: 'qrcode', // canvas-id
						usingComponents: false, // 是否是自定义组件
						loadingText: '', // loading文字
						text: txt, // 生成内容
						size: uni.upx2px(260), // 二维码大小
						cbResult: res => { // 生成二维码的回调
							console.log(res);
							this.codeSrc = res
						},
					});
			},

			async sharegoods(info) {
				uni.showLoading()
				this.CVS = uni.createCanvasContext('sharePoster', this);
				let godsPic = await this.getImageInfo(info.mainPic) //广告图
				let banPic = await this.getImageInfo('../../static/images/mine/sharegoodsbanner.jpg') //广告图
				this.canvasInfo.canvasW = 750
				this.canvasInfo.canvasH = 1334
				this.CVS.setFillStyle('white'); //canvas背景颜色
				this.CVS.fillRect(0, 0, 750, 1334); //canvas画布大小 

				this.CVS.drawImage(banPic.path, 0, 0, 750, 1334);
				this.CVS.drawImage(godsPic.path, 20, 20, 710, 760);
				this.CVS.drawImage(this.codeSrc, 269, 1034, 212, 212);

				this.CVS.setFontSize(28); //设置标题字体大小
				this.CVS.setFillStyle('#ffffff'); //设置标题文本颜色

				this.CVS.setTextAlign('center')
				// this.CVS.fillText('邀请码：' + this.userInfo.inviteCode, 374, 1296)
				this.CVS.draw(false, res => {
					console.log(res);
					uni.canvasToTempFilePath({
						canvasId: 'sharePoster',
						success: ress => {
							console.log(ress);
							uni.hideLoading()
							this.shareShow = true
							this.shareUrl = ress.tempFilePath
						}
					});
				});
			},

			async getImageInfo(imgSrc) {
				return new Promise((resolve, errs) => {
					uni.getImageInfo({
						src: imgSrc,
						success: image => {
							resolve(image);
						},
						fail: err => {
							errs(err);
							uni.hideLoading()
						}
					});
				});
			},
			sharewx() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: this.shareUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},

			sharepyq() {
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 2,
					imageUrl: this.shareUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},

			shareqq() {
				uni.share({
					provider: "qq",
					type: 2,
					imageUrl: this.shareUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			
			savepic(){
				uni.saveImageToPhotosAlbum({
					filePath: this.shareUrl,
					success: res => {
						uni.showToast({
							title:'保存相册成功~',
							icon:'none'
						})
						this.closeModel()
					},
					fail(err) {
						console.log(err);
					},
				});
			},
		},
		onPullDownRefresh() {
			this.pageCurrent = 0
			this.canload = false
			this.loadingstates = 'loading'
			this.goodsList = []
			this.getData()
		}
	}
</script>

<style lang="scss">
	.pullNew-wrapper {
		width: 100%;

		.pagebottom-container {
			width: 100%;

			.invite-step {
				width: 100%;
				margin-top: 30rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				padding: 30rpx;

				.step-title {
					width: 100%;
				}

				.step-list {
					font-size: 24rpx;
					font-weight: 500;
					color: #666666;
					line-height: 38rpx;
					margin-top: 25rpx;
				}
			}

			.bottomList-title {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				margin-top: 50rpx;
				margin-bottom: 40rpx;
			}

			.goodsList-container {
				width: 100%;

				.items-container {
					width: 100%;
					height: 242rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 20rpx;

					.left-image {
						width: 210rpx;
						height: 210rpx;
					}

					.right-info-container {
						width: 450rpx;
						margin-left: 20rpx;

						.goodsnameinfo-content {
							width: 100%;
							margin-bottom: 15rpx;

							.typeIcon-content {
								width: 60rpx;
								height: 24rpx;
								margin-right: 5rpx;
								margin-top: 8rpx;
							}

							.tradename {
								width: 400rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								font-size: 28rpx;
								font-weight: 400;
								color: #333333;
							}
						}

						.coupon-box {
							width: 100%;
							margin-top: 10rpx;

							.coupon-box-bac {
								height: 36rpx;
								padding: 0 19rpx 0 26rpx;
								background: url(../../static/images/app/coubac.png)no-repeat;
								background-size: 100% 100%;
								font-size: 24rpx;
								font-weight: 500;
								color: #FFFFFF;
							}
						}

						.btm-price-info {
							width: 100%;
							margin-top: 30rpx;

							.leftcontent {
								.org-price {
									font-size: 24rpx;
									font-weight: 500;
									color: #666666;
								}

								.new-price {
									.tips {
										font-size: 24rpx;
										font-weight: 500;
										color: #333333;
										line-height: 40rpx;
									}

									.price {
										font-size: 30rpx;
										font-weight: bold;
										color: #F51428;
									}
								}
							}

							.right-btn {
								width: 114rpx;
								height: 56rpx;
								background: linear-gradient(-40deg, #F51627, #FE4F04);
								border-radius: 28rpx;
								font-size: 28rpx;
								font-weight: 500;
								color: #F8F8FA;
							}
						}
					}
				}
			}
		}
	}

	.canvass {
		opacity: 0;
		position: fixed;
		pointer-events: none;
		bottom: 0;
		left: 0;
	}

	.share-container {
		width: 100%;

		.share-title {
			width: 100%;
			height: 90rpx;
			flex-wrap: wrap;
			border-bottom: 1rpx solid #EFF1F7;

			.title-text {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
		}

		.shareList {
			width: 100%;
			flex-wrap: wrap;
			border-bottom: 1rpx solid #EFF1F7;
			margin-top: 45rpx;

			.items-container {
				width: 25%;
				margin-bottom: 30rpx;

				.icon-box {
					width: 95rpx;
					height: 95rpx;
				}

				.modeName {
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
					margin-top: 15rpx;
				}
			}
		}

		.cancelbox {
			width: 100%;
			height: 90rpx;

			.canceltext {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}
</style>
